<template>
  <!-- 无子级 -->
  <el-menu-item :index="basePath" v-if="!item.childMenus || item.childMenus.length===0">
    <el-icon>
      <component :is="InitIcon(item.icon)"></component>
    </el-icon>
    <span>{{ item.menuText }}</span>
  </el-menu-item>

  <!-- 有子级 -->
  <el-sub-menu :index="basePath" v-else>
    <template #title>
      <el-icon>
        <component :is="InitIcon(item.icon)"></component>
      </el-icon>
      <span>{{ item.menuText }}</span>
    </template>
    <NavItem v-for="v in item.childMenus" :key="v.webUrl" :item="v" :basePath="v.webUrl"/>
  </el-sub-menu>
</template>

<script setup>
import { ref, reactive, defineProps } from "vue";
import { InitIcon } from "@/common";

const {item, basePath} = defineProps({
  item:{
    type: Object,
  },
  basePath: {
    type: String
  }
})

</script>